/* eslint-disable prefer-template */
import React, { useEffect, useState } from 'react';
import { Button, Icon, ResponsiveGrid } from '@alifd/next';
import { DataList, ActionPanel } from './components';
import { useParams } from 'react-router-dom';
import PageHeader from '@/components/PageHeader';
import { useStore } from '@/hooks';

const { Cell } = ResponsiveGrid;

/**
 * Page入口，一般仅包含布局处理，不含数据逻辑
 */
const DictItems = ({ onBackClick }) => {
  const { dictId } = useParams();
  const [title, setTitle] = useState('');
  const { dictItemStore: store } = useStore();

  useEffect(() => {
    store.getDict(dictId).then((dict) => setTitle(dict?.name || ''));
  }, []);

  return (
    <ResponsiveGrid gap={0} className="DictItems">
      <Cell colSpan={12}>
        <PageHeader title={(
          <div style={{ marginBottom: 10, display: 'flex', flexDirection: 'row', alignItems: 'center' }}>
            <Button type="normal" onClick={onBackClick} style={{ marginLeft: '-10px', border: 0 }}>
              <Icon type="arrow-left" style={{ padding: 6, border: '1px solid #ccc', borderRadius: '50%', color: 'var(--btn-pure-primary-bg)' }} />
            </Button>
            <span>{i18n.t('字典：') + `【${title || ''}】`}</span>
          </div>
        )}>
          <ActionPanel dictId={dictId} onBackClick={onBackClick} />
        </PageHeader>
      </Cell>
      <Cell colSpan={12}>
        <DataList dictId={dictId} />
      </Cell>
    </ResponsiveGrid>

  );
};

export default DictItems;
